<template>
  <div>
    <!-- 礼花触发（你可以用事件调用 startConfetti，而不是按钮） -->
    <button @click="startConfetti" style="display:none">🎉 开始礼花</button>

    <!-- 中央文字 -->
    <transition name="fade-up">
      <div v-if="showText" class="confetti-text">
        {{ text }}
      </div>
    </transition>
  </div>
</template>

<script>
import confetti from 'canvas-confetti'

export default {
  name: 'ConfettiOverlay',
  data() {
    return {
      showText: false,
      text: '',
      duration: 500
    }
  },
  methods: {
    setDuration(duration = 500) {
      this.duration = duration
      return this
    },
    startConfetti(text = '') {
      this.text = text
      this.showText = true

      const duration = this.duration
      const end = Date.now() + duration
      const colors = ['#bb0000', '#9a6a6a', '#da393b']

      const frame = () => {
        confetti({
          particleCount: 2,
          angle: 60,
          spread: 55,
          origin: { x: 0 },
          colors
        })
        confetti({
          particleCount: 2,
          angle: 120,
          spread: 55,
          origin: { x: 1 },
          colors
        })

        if (Date.now() < end) {
          requestAnimationFrame(frame)
        }
      }
      frame()

      // 文字延迟 1 秒后消失
      setTimeout(() => {
        this.showText = false
      }, this.duration * 2)
    }
  }
}
</script>

<style scoped>
/* 文字固定在屏幕中央 */
.confetti-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  font-weight: bold;
  color: #2c3e50;
  z-index: 9999;
  animation: pop 0.5s ease-out;
  pointer-events: none; /* 不影响鼠标操作 */
}

/* 渐隐动画 */
.fade-up-enter-active,
.fade-up-leave-active {
  transition: all 1.5s ease;
}

.fade-up-enter-from,
.fade-up-leave-to {
  opacity: 0;
  transform: translate(-50%, -40%);
}

/* 弹出动画 */
@keyframes pop {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  80% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
</style>
